import React, { useState } from 'react';
import { Input, Select, Button, Tabs, Table, Empty, Spin } from 'antd';
import { SearchOutlined, PlusOutlined, ReloadOutlined } from '@ant-design/icons';
import './styles.scss';

const { TabPane } = Tabs;
const { Option } = Select;

const SalesOrderReport: React.FC = () => {
  const [activeTab, setActiveTab] = useState('1');
  const [searchParams, setSearchParams] = useState({
    goodsName: '',
    orderNo: '',
    customer: '全部客户',
    storeName: '请选择所属仓库',
    goodsType: '请选择商品分类'
  });
  const [dataSource, setDataSource] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);

  // 处理搜索参数变化
  const handleSearchParamChange = (key: string, value: string) => {
    setSearchParams({
      ...searchParams,
      [key]: value
    });
  };

  // 处理搜索按钮点击
  const handleSearch = () => {
    setLoading(true);
    // 模拟API请求
    setTimeout(() => {
      setLoading(false);
      // 暂时不设置数据，保持空状态
    }, 500);
  };

  // 处理新增销售预定单按钮点击
  const handleAddNew = () => {
    console.log('新增销售预定单');
    // 这里应该跳转到新增页面或打开新增弹窗
  };

  // 表格列定义 - 按单据
  const orderColumns = [
    {
      title: '所属门店',
      dataIndex: 'store',
      key: 'store',
      sorter: true,
    },
    {
      title: '单据日期',
      dataIndex: 'date',
      key: 'date',
      sorter: true,
    },
    {
      title: '单据编号',
      dataIndex: 'orderNo',
      key: 'orderNo',
      sorter: true,
    },
    {
      title: '客户',
      dataIndex: 'customer',
      key: 'customer',
      sorter: true,
    },
    {
      title: '销售预定商品',
      dataIndex: 'goods',
      key: 'goods',
    },
    {
      title: '总计金额',
      dataIndex: 'totalAmount',
      key: 'totalAmount',
      sorter: true,
    },
    {
      title: '制单人',
      dataIndex: 'creator',
      key: 'creator',
      sorter: true,
    },
    {
      title: '备注信息',
      dataIndex: 'remark',
      key: 'remark',
    },
  ];

  // 表格列定义 - 按明细
  const detailColumns = [
    {
      title: '所属门店',
      dataIndex: 'store',
      key: 'store',
      sorter: true,
      width: 120,
    },
    {
      title: '单据日期',
      dataIndex: 'date',
      key: 'date',
      sorter: true,
      width: 120,
    },
    {
      title: '单据编号',
      dataIndex: 'orderNo',
      key: 'orderNo',
      sorter: true,
      width: 120,
    },
    {
      title: '客户',
      dataIndex: 'customer',
      key: 'customer',
      sorter: true,
      width: 120,
    },
    {
      title: '商品名称',
      dataIndex: 'goodsName',
      key: 'goodsName',
      sorter: true,
      width: 160,
    },
    {
      title: '辅助属性',
      dataIndex: 'attribute',
      key: 'attribute',
      width: 100,
    },
    {
      title: '规格型号',
      dataIndex: 'specification',
      key: 'specification',
      width: 100,
    },
    {
      title: '商品单位',
      dataIndex: 'unit',
      key: 'unit',
      width: 100,
    },
    {
      title: '数量',
      dataIndex: 'quantity',
      key: 'quantity',
      width: 80,
    },
    {
      title: '已转数量',
      dataIndex: 'convertedQuantity',
      key: 'convertedQuantity',
      width: 100,
    },
    {
      title: '未转数量',
      dataIndex: 'unconvertedQuantity',
      key: 'unconvertedQuantity',
      width: 100,
    },
    {
      title: '单价',
      dataIndex: 'price',
      key: 'price',
      width: 80,
    },
  ];

  // 渲染搜索区域 - 按单据
  const renderOrderSearchArea = () => (
    <div className="search-area">
      <div className="search-item">
        <span className="label">商品名称</span>
        <Input 
          placeholder="请输入商品名称" 
          value={searchParams.goodsName}
          onChange={(e) => handleSearchParamChange('goodsName', e.target.value)}
        />
      </div>
      <div className="search-item">
        <span className="label">单据编号</span>
        <Input 
          placeholder="请输入单据编号" 
          value={searchParams.orderNo}
          onChange={(e) => handleSearchParamChange('orderNo', e.target.value)}
        />
      </div>
      <div className="search-item">
        <span className="label">客户</span>
        <Select 
          value={searchParams.customer} 
          style={{ width: '100%' }}
          onChange={(value) => handleSearchParamChange('customer', value)}
        >
          <Option value="全部客户">全部客户</Option>
        </Select>
      </div>
      <Button 
        type="primary" 
        icon={<SearchOutlined />}
        onClick={handleSearch}
      >
        搜索
      </Button>
      <Button>高级</Button>
    </div>
  );

  // 渲染搜索区域 - 按明细
  const renderDetailSearchArea = () => (
    <div className="search-area">
      <div className="search-item">
        <span className="label">所属仓库</span>
        <Select 
          value={searchParams.storeName} 
          style={{ width: '100%' }}
          onChange={(value) => handleSearchParamChange('storeName', value)}
        >
          <Option value="请选择所属仓库">请选择所属仓库</Option>
          <Option value="总店">总店</Option>
        </Select>
      </div>
      <div className="search-item">
        <span className="label">商品分类</span>
        <Select 
          value={searchParams.goodsType} 
          style={{ width: '100%' }}
          onChange={(value) => handleSearchParamChange('goodsType', value)}
        >
          <Option value="请选择商品分类">请选择商品分类</Option>
        </Select>
      </div>
      <div className="search-item">
        <span className="label">编号、名称、规格</span>
        <Input 
          placeholder="请输入商品编号/名称/规格" 
          value={searchParams.goodsName}
          onChange={(e) => handleSearchParamChange('goodsName', e.target.value)}
        />
      </div>
      <Button 
        type="primary" 
        icon={<SearchOutlined />}
        onClick={handleSearch}
      >
        搜索
      </Button>
      <Button icon={<ReloadOutlined />}>重置</Button>
      <Button>高级</Button>
    </div>
  );

  // 渲染表格区域
  const renderTableArea = () => (
    <div className="table-container">
      <Table
        columns={activeTab === '1' ? orderColumns : detailColumns}
        dataSource={dataSource}
        loading={loading}
        rowKey="id"
        scroll={{ x: activeTab === '2' ? 1500 : undefined }}
        pagination={{
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (total) => `共 ${total} 条`,
        }}
        locale={{
          emptyText: (
            <Empty
              image={Empty.PRESENTED_IMAGE_SIMPLE}
              description="无数据"
            >
              {activeTab === '1' && (
                <Button 
                  type="primary" 
                  icon={<PlusOutlined />}
                  onClick={handleAddNew}
                >
                  新增销售预定单
                </Button>
              )}
            </Empty>
          )
        }}
      />
    </div>
  );

  // 渲染操作按钮区域
  const renderActionButtons = () => (
    <div className="action-buttons">
      <div className="left-buttons">
        <Button type="primary" className="action-button">审核</Button>
        <Button className="action-button">反审核</Button>
        {activeTab === '1' && (
          <Button 
            type="primary" 
            className="action-button new-btn" 
            icon={<PlusOutlined />}
            onClick={handleAddNew}
          >
            新增
          </Button>
        )}
      </div>
      <div className="right-buttons">
        <Button className="action-button">导出</Button>
      </div>
    </div>
  );

  return (
    <div className="sales-order-report">
      <div className="tabs-container">
        <Tabs 
          activeKey={activeTab} 
          onChange={setActiveTab}
        >
          <TabPane tab="按单据" key="1" />
          <TabPane tab="按明细" key="2" />
        </Tabs>
      </div>

      {/* 根据当前标签页显示不同的搜索区域 */}
      {activeTab === '1' ? renderOrderSearchArea() : renderDetailSearchArea()}

      {/* 操作按钮区域 */}
      {renderActionButtons()}

      {/* 表格区域 */}
      {renderTableArea()}
    </div>
  );
};

export default SalesOrderReport; 